<template>
	<view class="container">
	  <image class="bg-set" src="../../static/image/bg.jpg"></image>
	  <view class="content">
		  <view class="head">
			  <u-icon name="arrow-left" color="white" size="35" @tap="goBack"></u-icon>
			  <view @tap="report" style="color: rgb(255, 186, 90);font-size: 35rpx;position: absolute;right: 25rpx;">联系墙主撕掉该留言</view>
		  </view>
		  <view v-if="message.minUrl!==null" style="width: 100%;padding: auto;margin-top: 30rpx;">
			  <image @click="preView(message.url)" style="margin: auto;width: 100%;object-fit: contain;border-radius: 20rpx;box-shadow: 5px 5px 5px #000000;" :src="message.minUrl"></image>
		  </view>
		  <view class="message-container">
		  		  <view :class="['message','color'+message.color]">
		  		  	<view class="head">
		  		  	  <view class="time" @tap="showTime(message.time)">{{message.time.substring(0,11)}}</view>
		  		  	  <view style="margin-left: 20rpx;" class="time">{{message.address==null?'未知':message.address}}</view>
					  <view @tap="deleteConfirm(message.id)" v-show="showDelete(message.time)" style="margin-left: 20rpx;color: red;" class="time">撕掉</view>
					  <view class="type">{{message.label}}</view>
		  		  	</view>
		  		  	<view class="message-body">
		  		  	  <text selectable="true">
		  		  		    {{message.content}}
		  		  	  </text>
		  		  	</view>
		  		  	<view class="foot">
		  		  	  <view class="option" @tap="clickLike()">
		  		  		<u-icon :name="message.liked?'heart-fill':'heart'" size="20"></u-icon>{{message.likes}}
		  		  	  </view>
		  		  	  <view class="option">
		  		  	  	<u-icon name="chat" size="20"></u-icon>{{message.comment==null?0:message.comment}}
		  		  	  </view>
		  		  	  <view class="name">{{message.name}}</view>
		  		  	</view>
		  		  </view>
		  </view>
		  <view class="comments" v-show="comments.length>0">
			   <view class="title">{{'共'+comments.length+'条评论'}}</view>
			   <view class="comment-container">
				   <view class="comment" v-for="(comment,index) in comments" :key="index">
					   <view class="left">
						   <u-avatar
								:text="comment.name[0]"
								fontSize="18"
								randomBgColor
							></u-avatar>						   
					   </view>
						<view class="right">
							<view class="head">
								<text class="name">{{comment.name}}</text>
								<view class="time">{{comment.time.substring(0,16)}}</view>
							</view>
							<text class="body">{{comment.content}}</text>
						</view>
				   </view>
			   </view>
		  </view>
		  <view class="bottom">
		  	<u--input
		  	  class='input'
		  	    placeholder="请输入内容"
		  	    border="surround"
		  	    v-model="comment"
		  	    @change="change"
		  	  ></u--input>
		  	<u-button @tap="showPop()" type="primary" text="确定"></u-button>
		  </view>
		   <view style="height: 200rpx;"></view>
		   <u-popup
		   			:safeAreaInsetBottom="true"
		   			:safeAreaInsetTop="true"
		   			:mode="popupData.mode"
		   			:show="show"
		   			:round="popupData.round"
		   			:overlay="popupData.overlay"
		   			:borderRadius="popupData.borderRadius"
		   			:closeable="popupData.closeable"
		   			:closeOnClickOverlay="popupData.closeOnClickOverlay"
					@close="show = false"
		   		>
		   			<view
		   				class="u-popup-slot"
						style="display: block;padding: 30rpx;align-items: center;"
		   			>
						<u--input
							style="margin: 10%;"
						    placeholder="留下你的昵称吧~"
						    border="surround"
						    v-model="name"
						    @change="nameChange"
						  ></u--input>
						  <view style="display: flex;">
							  <u-button
							  	type="error"
							  	text="匿名"
							  	customStyle="width: 100rpx"
							  	@click="anonymity"
							  ></u-button>
							  <u-button
							  	type="primary"
							  	text="提交"
							  	customStyle="width: 100rpx"
							  	@tap="submit()"
							  ></u-button>
						  </view>
		   				
		   			</view>
		   		</u-popup>
	  </view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				message: {},
				popupData: {
					overlay: true,
					mode: 'center',
					round: 10,
					closeOnClickOverlay: true,
					closeable: true
				},
				id:-1,
				show: false,
				comment: '',
				name: '',
				comments:[],
				requestUrl: 'http://whczff.xyz:8010'
			}
		},
		onLoad(params) {
			if(params.id==null)
				uni.reLaunch({
					url:'./index'
				})
			this.id = params.id
			this.getMessage()
			this.getComments()
		},
		methods:{
			//预览图片
			preView(url){
				uni.previewImage({
					urls:[url]
				})
			},
			deleteConfirm(id){
				let that = this;
				uni.showModal({
					title:'是否撕掉该留言',
					content:'1分钟后胶水干了就不能撕了~',
					confirmText:'确定',
					confirmColor:'#D94B4D',
					cancelText:'取消',
					success: (res) => {
						if(res.confirm){
							that.deleteMessage(id)
						}
					}
				})
			},
			deleteMessage(id){
				let that = this
				uni.request({
					url:this.requestUrl+'/message/delete?id='+id,
					method:"GET",
					success(res) {
						if(res.data.code!=='1'){
							uni.showToast({
								icon:"error",
								title:res.data.message
							})
						}else{
							uni.showToast({
								icon:"success",
								title:'胶水还没干，成功撕下来了~'
							})
							setTimeout(()=>{
								uni.reLaunch({
									url:'./index'
								})
							},1000)
						}
					}
				})
			},
			showDelete(time){
				let now = new Date()
				if((now - new Date(time))/1000>60)
					return false;
				return true;
			},
			anonymity(){
				this.name = '匿名'
				this.submit()
			},
			submit(){
				if(!this.show)	return
				if(this.name.trim()===''){
					this.show = false
					uni.showToast({
						icon:"none",
						title:'请留下你的昵称吧~'
					})
					return
				}
				let params = {
					parent: this.id,
					name: this.name.trim(),
					content: this.comment.trim()
				}
				this.show = false
				let that = this
				uni.request({
					url:this.requestUrl+'/comment/post',
					method:"POST",
					header:{
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:params,
					success(res) {
						if(res.data.code!=='1'){
							uni.showToast({
								icon:"error",
								title:res.message
							})
						}else{
							that.name = ''
							that.comment = ''
							that.getComments()
							that.getMessage()
							uni.showToast({
								icon:"none",
								title:'评论成功啦~'
							})
						}
					}
				})
			},
			getComments(){
				let that = this
				uni.request({
					url:this.requestUrl+'/comment/list?parent='+this.id,
					method:"GET",
					success(res) {
						if(res.data.code!=='1'){
							uni.showToast({
								icon:"error",
								title:res.message
							})
						}else{
							that.comments = res.data.data
						}
					}
				})
			},
			getMessage(){
				let that = this
				uni.request({
					url:this.requestUrl+'/message/one?id='+this.id,
					method:"GET",
					success(res) {
						if(res.data.code!=='1'){
							uni.showToast({
								icon:"error",
								title:res.message
							})
						}else{
							that.message = res.data.data;
						}
					}
				})
			},
			showPop(){
				if(this.comment.trim()==='')	return;
				this.show = true
			},
			nameChange(e){

			},
			showTime(time){
				uni.showToast({
					icon: 'none',
					title: time
				})
			},
			clickLike(){
				if(this.message.liked){
					uni.showToast({
						icon:"none",
						title:'你已经点过赞啦~'
					})
					return
				}
				let that = this
				uni.request({
					url:this.requestUrl+'/message/like?id='+this.message.id,
					method:"GET",
					success(res) {
						if(res.data.code!=='1'){
							uni.showToast({
								icon:"error",
								title:res.message
							})
						}else{
							that.message.liked = true
							that.message.likes ++
							uni.showToast({
								icon:"none",
								title:'♥'
							})
						}
					}
				})
				
			},
			change(e){
				if(e.length>50)
				{
					uni.showToast({
						icon:"none",
						title:'评论最多50个字~'
					})
					this.comment = e.substring(0,50)
				}
			},
			goBack(){
				uni.navigateBack({
					animationType:'slide-out-left'
				})
			},
			report(){
				uni.showToast({
					icon:"success",
					title:'谢谢您的反馈~'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/uni_modules/uview-ui/index.scss";
	.content{
		padding-top: 40rpx!important;
		padding: 20rpx;
		position: relative;
		.head{
			display: flex;
		}
		.bottom{
			position: fixed;
			bottom: 40rpx;
			display: flex;
			width: 100%;
			color: white;
			.input{
				width: 20%;
				background-color: aliceblue;
			}
			button{
				margin-left: 10rpx;
				width: 20%;
				margin-right: 30rpx
			}
		}
		.comments{
			box-shadow: 5px 5px 5px #000000;
			background-color: aliceblue;
			padding: 30rpx;
			border-radius: 10rpx;
			.title{
				font-weight: 700;
			}
			.comment-container{
				.comment{
					margin-top: 60rpx;
					display: flex;
					.left{
						width: 100rpx;
					}
					.right{
						width: 75%;
						.head{
							margin-bottom: 20rpx;
							.name{
								font-weight: 800;
							}
							.time{
								font-weight: 200;
								margin-left: 20rpx;
								font-size: 30rpx;
								padding-top: 5rpx;
							}
						}
						.body{
							font-weight: 400;
						}
						
					}
				}
			}
		}	
	}
	.bg-set{
	    position: fixed;
	    width: 105%;
	    height: 105%;
	    top: -2.5%;
	    left: -2.5%;
	    z-index: -1;
		filter: blur(10rpx);
	}
	.color1{
		background-color: rgb(219,244,249);
	}
	.color2{
		background-color: rgb(255,246,222);
	}
	.color3{
		background-color: rgb(239,228,252);
	}
	.color4{
		background-color: rgb(168,237,138);
	}
	.color5{
		background-color: rgb(252,175,162);
	}
	.message{
		box-shadow: 5px 5px 5px #000000;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 30rpx;
		margin-bottom: 10%;
		margin-top: 10%;
		.head{
			position: relative;
			display: flex;
			.time{
				color: rgb(148,148,148);
			}
			.type{
				position: absolute;
				right: 0;
				color: rgb(148,148,148);
			}
		}
		.message-body{
			margin-top: 5%;
			margin-left: 3%;
			margin-right: 3%;
			font-family: 'myFont';
			font-size: 35rpx;
		}
		.foot{
			margin-top: 5%;
			color: rgb(148,148,148);
			position: relative;
			display: flex;
			.option{
				font-size: 30rpx;
				display: flex;
				margin-right: 5%;
			}
			.name{
				font-weight: 800;
				font-size: 40rpx;
				font-family: 'myFont';
				right: 0;
				color: black;
				position: absolute;
			}
		}
	}
	.u-popup-slot {
			width: 200px;
			height: 150px;
			@include flex;
			justify-content: center;
			align-items: center;
		}
</style>